<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 
            监视属性watch：
				1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
				2.监视的属性必须存在，才能进行监视！！
				3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视（了解即可）
				备注：被监视的可以是：属性（data），也可以是计算属性（computed） 
        -->

        <!-- 此处的三元运算也是对原有数据的处理,可放置于 计算属性 中 -->
        <!-- <h2>今天的天气{{isHot ? '炎热' : '凉爽'}}</h2> -->

        <!-- 计算属性应用 -->
        <h2>今天的天气{{info}}</h2>
            <button @click='change'>切换天气</button><br>

            <!-- 此处为另一种写法,点击事件内执行的逻辑简单,可以这样写,此前,需要将 methods 中的点击事件回调函数去掉 -->
            <!-- <button @click='isHot = !isHot'>切换天气</button><br> -->

        <img :src="url">
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#demo',
            data: {
                isHot: true,
                url: 'https://s3.ax1x.com/2020/12/13/reC1IA.jpg'
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            //设置监听
            watch: {
                //设置监听对象:可以是data中的属性,也可以是计算属性
                isHot: {
                    //handler 是处理监听的函数,当监听属性值发生改变时会触发
                    /**
                     * handler函数可传入两个参数:
                     *      参数1:监听属性改变后的值,新值
                     *      参数2:监听属性改变前的值,旧值
                    */
                    handler(newValue, oldValue) {
                        if (newValue) this.url = 'https://s3.ax1x.com/2020/12/13/reC1IA.jpg'
                        else this.url = 'https://s3.ax1x.com/2020/12/13/reCaqg.jpg'
                    }
                }
            }
        })

        //如下的这种监视写法，了解即可，用的不多
        /* vm.$watch('isHot',{
            handler(newValue,oldValue){
                console.log('isHot的值发生变化了~~~',newValue,oldValue)
                if(newValue) this.url = 'https://s3.ax1x.com/2020/12/13/reC1IA.jpg'
                else this.url = 'https://s3.ax1x.com/2020/12/13/reCaqg.jpg'
            }
        }) */
    </script>
</body>

</html>